import React, { useMemo } from 'react';
import { Link } from 'umi';
import Header from '@/components/Header';
import UserInfo from '@/components/UserInfo';
import BookItem from './BookItem';
import { Tabs, Input } from 'antd';
const { TabPane } = Tabs;
const { Search } = Input;

const HeaderMemu = () => {
  return (
    <div className="flex items-center pl16 bold text-color">
      <div className="pr20 text-color-hover pointer">
        <Link to="/module-cfg">新建</Link>
      </div>
      {/* <div className="px20 text-color-hover pointer">发布上架</div> */}
      <div className="text-color-hover pointer">
        <Link to="/help">帮助</Link>
      </div>
    </div>
  );
};

export default function Index() {
  const tabRender = useMemo(() => {
    return (
      <Tabs defaultActiveKey="workspace">
        <TabPane tab="我的工作台" key="workspace"></TabPane>
        <TabPane tab="平台" key="platform"></TabPane>
      </Tabs>
    );
  }, []);
  return (
    <div className="flex flex-col h100p">
      <Header leftRender={<HeaderMemu />} rightRender={<UserInfo />} />
      <div className="flex1 flex flex-col m-auto" style={{ width: 1024 }}>
        <div className="pt20">{tabRender}</div>
        <div className="flex items-center">
          <div className="w500">
            <Search size="large" enterButton />
          </div>
          <div className="px20 text-color">高级搜索</div>
        </div>
        <div className="flex1 pt20">
          <BookItem />
        </div>
      </div>
    </div>
  );
}
